/**=========================================================
 * Directive: draggableCaptcha.js
 =========================================================*/

App.directive('draggableCaptcha', ['$timeout', 'Utils',
    function($timeout,utils) {
        'use strict';
        
        return {
            restrict: 'EA',
            replace: true,
            template: function($element,$attrs){
                return '\
                    <div class="captcha-wrap">\
                        <div class="captcha-tip">\
                            {{$translate.instant("login.CAPTCHA_TIPS")}}\
                        </div>\
                        <ul class="captcha">\
                            <li class="captchaItem">1</li>\
                            <li class="captchaItem">2</li>\
                            <li class="captchaItem">3</li>\
                            <li class="captchaItem">4</li>\
                            <li class="captchaItem">5</li>\
                            <li class="captchaItem">6</li>\
                        </ul>\
                    </div>\
                '
            },
            link: function($scope, $element, $attrs){
                $timeout(function(){
                    var captcha = $(".captcha");
                    captcha.sortable();
                    captcha.disableSelection();
                    
                    var captchaItems = captcha.children();
                    for(var i = 0; i < captchaItems.length; i++){
                        var j = parseInt(Math.random() * captchaItems.length),
                            x = captchaItems[i];
                        captchaItems[i] = captchaItems[j], 
                        captchaItems[j] = x;
                    }
                    
                    captcha.html(captchaItems);
                },10000)
                
            }
        };
    }
]);
